<template>
  <div class="enterprise-container">
    <!-- 页面头部 -->
    <div class="header">
      <el-page-header
        @back="$router.back()"
        :content="id ? '企业详情' : '新增企业信息'"
        title="返回"
      >
      </el-page-header>
    </div>
    <!-- 企业信息 -->
    <div class="enterprise-info">
      <h3>企业信息</h3>
      <el-row>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">企业名称:</span>
            <span>{{ enterpriseForm.name }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">法人:</span>
            <span>{{ enterpriseForm.legalPerson }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">注册地址:</span>
            <span>{{ enterpriseForm.registeredAddress }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">所在行业:</span>
            <span>{{ enterpriseForm.industryName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">营业执照:</span>
            <img
              :src="enterpriseForm.businessLicenseUrl"
              alt="营业执照"
              class="license-img"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 联系人信息 -->
    <div class="contact-info">
      <h3>联系人信息</h3>
      <div style="display: flex; flex-wrap: wrap">
        <div style="flex: 1 0 50%; box-sizing: border-box; padding: 8px">
          <span style="font-weight: bold">企业联系人：</span
          ><span>{{ contactForm.contact }}</span>
        </div>
        <div style="flex: 1 0 50%; box-sizing: border-box; padding: 8px">
          <span style="font-weight: bold">联系电话：</span
          ><span>{{ contactForm.contactNumber }}</span>
        </div>
      </div>
    </div>

    <!-- 租赁记录 -->
    <div class="lease-records">
      <h3>租赁记录</h3>
      <el-table :data="rentRecords" stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="name" label="租赁楼宇"></el-table-column>
        <el-table-column prop="status" label="合同状态">
          <template #default="scope">
            {{ formateStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="租赁起止时间">
          <template #default="rentObj">
            {{ rentObj.row.startTime }}至{{ rentObj.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="contractName" label="租赁合同">
          <template #default="scope">
            <el-button size="mini" type="text">
              <a
                :href="`${previewURL}?src=${encodeURIComponent(
                  scope.row.contractUrl
                )}`"
                target="_blank"
              >
                查看合同
              </a>
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="录入时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="mini"type="text" 
              ><a :href="scope.row.contractUrl" download>合同下载</a></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getIndustryListAPI, getEnterpriseDetailAPI } from "@/api/enterprise";

export default {
  data() {
    return {
      enterpriseForm: {},
      contactForm: {
        contact: "",
        contactNumber: "",
      },
      list: [],
      rentRecords: [],
      previewURL: "https://view.officeapps.live.com/op/view.aspx",
    };
  },
  computed: {
    id() {
      return this.$route.query.id || null;
    },
  },
  created() {
    this.getIndustryList();
    if (this.id) {
      this.getEnterpriseDetail();
      this.getExpandColumns();
    }
  },
  methods: {
    async getIndustryList() {
      const res = await getIndustryListAPI();
      this.list = res.data;
    },
    async getEnterpriseDetail() {
      // 查看企业
      const res = await getEnterpriseDetailAPI(this.id);
      const {
        name,
        legalPerson,
        registeredAddress,
        industryCode,
        businessLicenseUrl,
        industryName,
      } = res.data;
      this.enterpriseForm = {
        name,
        legalPerson,
        registeredAddress,
        industryCode,
        businessLicenseUrl,
        industryName,
      };
      const { contact, contactNumber } = res.data;
      this.contactForm = { contact, contactNumber };
    },
    // 查看展开列传id
    async getExpandColumns() {
      const res = await getEnterpriseDetailAPI(this.id);
      this.rentRecords = res.data.rent;
    },

    // 所属行业
    getIndustryName(code) {
      const industry = this.list.find((item) => item.industryCode === code);
      return industry ? industry.industryName : "未知";
    },
    // 状态
    formateStatus(status) {
      const Map = {
        0: "待生效",
        1: "生效中",
        2: "已到期",
        3: "已退租",
      };
      return Map[status];
    },
    // 标签状态
    formateInfoType(status) {
      const Map = {
        0: "warring",
        1: "success",
        2: "info",
        3: "danger",
      };
      return Map[status];
    },
  },
};
</script>

<style scoped>
.enterprise-container {
  max-width: 1600px;
  margin: 100px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 页面头部样式 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

/* 信息区样式 */
.enterprise-info,
.contact-info {
  padding: 20px;
  margin-top: 30px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.enterprise-info h3,
.contact-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

/* 表格样式 */
.lease-records {
  margin-top: 30px;
}

.lease-records h3 {
  margin-bottom: 10px;
}
.label {
  font-weight: bold;
  display: inline-block;
  padding: 20px;
}
.license-img {
  width: 200px;
}
</style>
